<template>
  <div class="template-root-div">
    <div class="left-table">
      <div class="main">
        <mine-title>帮助说明</mine-title>
        <div class="content">
          <div class="block-header">
            <div class="block-header-left">
              <mine-button type="primary" @click="addHelp()"
                ><i class="iconfont icon-add-line"></i>新建说明
              </mine-button>
              <mine-button
                @click="deleteHelp"
                secondary
                :disabled="!helpMultipleSelection.length"
                ><i class="iconfont icon-delete-line"></i>删除
              </mine-button>
              <mine-button
                type="primary"
                secondary
                @click="loadHelpData(true, true)"
                ><i class="iconfont icon-reset-line"></i>刷新
              </mine-button>
            </div>
            <div class="block-header-right"></div>
          </div>
          <el-table
            class="table"
            :data="helpTableData"
            style="width: 100%"
            v-loading="helpLoading"
            @selection-change="handleHelpSelectionChange"
            ref="multipleTable"
          >
            <!-- @row-click="helpRowClick" -->
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column label="序号" show-overflow-tooltip width="60">
              <template slot-scope="scope">
                <!--                                <span>{{ scope.$index + (helpCurrentPage - 1) * helpPageSize + 1 }} </span>-->
                <span
                  >{{ scope.$index + (helpCurrentPage - 1) * helpPageSize + 1 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="帮助说明编码"
              prop="helpCode"
              show-overflow-tooltip
              width="180px"
            >
              <template slot="header">
                <span>帮助说明编码</span>
                <mine-table-search
                  @searchSubmit="searchHelpSubmit"
                  name="helpCode"
                ></mine-table-search>
              </template>
            </el-table-column>
            <el-table-column
              label="一级菜单名称"
              prop="firstMenu"
              show-overflow-tooltip
              width="180px"
            >
            </el-table-column>
            <!-- <el-table-column
              label="二级菜单名称"
              prop="secondaryMenu"
              show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column
              label="输入端口"
              prop="inPort"
              show-overflow-tooltip
              width="100px"
            >
            </el-table-column>
            <el-table-column
              label="输出端口"
              prop="outPort"
              show-overflow-tooltip
              width="100px"
            >
            </el-table-column>
            <el-table-column
              label="功能说明"
              prop="funDescription"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="参数"
              prop="functionName"
              show-overflow-tooltip
            >
            </el-table-column>
            <!-- <el-table-column
              label="所属功能"
              prop="functionName"
              show-overflow-tooltip
            >
            </el-table-column> -->
            <!-- <el-table-column label="备注" prop="remarks" show-overflow-tooltip>
            </el-table-column> -->
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <mine-button type="text" @click="editHelp(scope.row)"
                  >详情</mine-button
                >
              </template>
            </el-table-column>
          </el-table>
          <mine-pagination
            @numberChange="helpNumberChange"
            :total="helpTotal"
            :page-size="helpPageSize"
            :current-page="helpCurrentPage"
          >
          </mine-pagination>
        </div>
      </div>
    </div>
    <!-- <div class="right-table">
      <div class="main">
        <mine-title>帮助说明参数</mine-title>
        <div class="content">
          <div class="block-header">
            <div class="block-header-left">
              <mine-button
                type="primary"
                @click="addParam()"
                :disabled="!paramId"
                ><i class="iconfont icon-add-line"></i>新建参数
              </mine-button>
              <mine-button
                @click="deleteParam"
                secondary
                :disabled="!paramMultipleSelection.length"
                ><i class="iconfont icon-delete-line"></i>删除
              </mine-button>
              <mine-button
                type="primary"
                secondary
                @click="loadParamData(true, true)"
              >
                <i class="iconfont icon-reset-line"></i>刷新
              </mine-button>
            </div>
            <div class="block-header-right"></div>
          </div>
          <el-table
            class="table"
            :data="paramTableData"
            style="width: 100%"
            v-loading="paramLoading"
            @selection-change="handleParamSelectionChange"
            @row-click="helpParamClick"
            ref="multipleTable"
          >
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column label="序号" show-overflow-tooltip width="60">
              <template slot-scope="scope">
                <span
                  >{{
                    scope.$index + (paramCurrentPage - 1) * paramPageSize + 1
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="功能说明"
              prop="funDescription"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="备注" prop="remarks" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <mine-button type="text" @click="editParam(scope.row)"
                  >详情</mine-button
                >
              </template>
            </el-table-column>
          </el-table>
          <mine-pagination
            @numberChange="paramNumberChange"
            :total="paramTotal"
            :page-size="paramPageSize"
            :current-page="paramCurrentPage"
          >
          </mine-pagination>
        </div>
      </div>
    </div> -->
    <!-- 弹框区 -->
    <!-- 左列表弹框 -->
    <mine-dialog
      :top="'4vh'"
      :dialogFormVisible="helpInfoFlag"
      :width="'800px'"
      :showClose="true"
      :title="helpTitle"
      @close="closeDialog"
    >
      <HelpInfo
        v-if="helpInfoFlag"
        slot="option"
        @changeFlag="closeDialog"
        :rowData="helpInfoRowData"
      ></HelpInfo>
    </mine-dialog>
    <!-- 右列表弹框 -->
    <!-- <mine-dialog
      :top="'4vh'"
      :dialogFormVisible="helpInfoParamFlag"
      :width="'800px'"
      :showClose="true"
      :title="helpParamTitle"
      @close="closeParamDialog"
    >
      <HelpInfoParam
        v-if="helpInfoParamFlag"
        slot="option"
        @changeFlag="closeParamDialog"
        :rowData="helpInfoParamRowData"
        :paramId="paramId"
      ></HelpInfoParam>
    </mine-dialog> -->
  </div>
</template>

<script>
import qs from "qs";
import HelpInfo from "./components/helpInfoDialog.vue";
import { QWebChannel } from "@/modules/index/utils/qwebchannel.js";
// import HelpInfoParam from "./components/helpInfoParamDialog.vue";

export default {
  components: {
    HelpInfo,
    // HelpInfoParam,
  },
  data() {
    return {
      tableHeight: window.innerHeight - 330,
      // left-table参数
      helpListQuery: {},
      helpTableData: [],
      helpTotal: 0,
      helpPageSize: 10,
      helpCurrentPage: 1,
      helpMultipleSelection: [],
      helpLoading: false,

      // right-table参数
      // paramListQuery: {},
      // paramTableData: [],
      // paramTotal: 0,
      // paramPageSize: 10,
      // paramCurrentPage: 1,
      // paramMultipleSelection: [],
      // paramLoading: false,

      // paramId: 0,
      //   弹框区参数
      helpInfoFlag: false,
      // helpInfoParamFlag: false,
      helpTitle: "帮助说明新增", // 弹框标题
      // helpParamTitle: "帮助说明参数弹框",
      helpInfoRowData: {}, // 帮助说明列表当前行数据
      // helpInfoParamRowData: {}, // 帮助说明参数列表当前行数据
    };
  },
  methods: {
    closeDialog() {
      this.helpInfoFlag = false;
      this.loadHelpData(true);
    },
    // closeParamDialog() {
    //   this.helpInfoParamFlag = false;
    //   this.loadParamData(true);
    // },
    searchHelpSubmit(value) {
      if (value.key === "helpCode") {
        this.helpListQuery.helpCode = value.value;
      }
      //   if (value.key === "dirName") {
      //     this.helpListQuery.dirName = value.value;
      //   }
      //   if (value.key === "isSystem") {
      //     switch (value.value) {
      //       case "否":
      //         this.helpListQuery.isSystem = 1;
      //         break;
      //       case "是":
      //         this.helpListQuery.isSystem = 0;
      //         break;
      //     }
      //   }
      this.loadHelpData(true);
    },
    // searchParamSubmit(value) {
    //   if (value.key === "firstMenu") {
    //     this.helpListQuery.firstMenu = value.value;
    //   }
    //   this.loadParamData(true);
    // },
    async loadData(flag) {
      await this.loadHelpData(flag);
      // await this.loadParamData(flag)
    },
    addHelp() {
      this.helpInfoRowData = {};
      this.helpInfoFlag = true;
    },
    async deleteHelp() {
      this.$mineConfirm("确认要删除", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const ids = this.helpMultipleSelection.map((item) => item.id);
          this.helpLoading = true;
          try {
            let res = {};
            let _self = this;
            if (_self.$qwebUtil.isQtClient) {
              const uuid = _self.$qwebUtil.generateRandomUUID();
              let sendObject;
              /* eslint-disable-next-line */
              const channel = new QWebChannel(
                window.qt.webChannelTransport,
                async function (channel) {
                  sendObject = channel.objects.sendObject;
                  // receivedJSON 修改此处发送请求参数
                  const receivedJSON = {
                    RequestUrl: `/helpInfo/deleteByIds${_self.$qwebUtil.convertIdsToQueryString(
                      ids
                    )}`,
                    RequestMethod: "post",
                    ContentType: "application/json;charset=UTF-8",
                    RequestBody: {},
                    isStringParam: false,
                    requestId: uuid,
                  };
                  await send();
                  await _self.$qwebUtil.receive(sendObject, receivedJSON);
                  // console.error('received','/feCanvas/pageList')
                }
              );
              /* eslint-disable-next-line */
              async function send() {
                sendObject.sendMessage.connect(function (data) {
                  if (!data) {
                    console.error("No data received.");
                  }
                  res = JSON.parse(data);
                  const result = res.response || {};
                  // update the followings
                  if (result.success && res.webInfo.requestId == uuid) {
                    _self.$message.success("删除成功");
                    _self.loadData(true);
                  } else {
                    _self.$message.error(result.msg || "删除失败");
                  }
                });
              }
            } else if (this.$webview2.isWPF) {
              const uuid = this.$webview2.generateRandomUUID();
              await this.$webview2.sendWebView2(
                `/helpInfo/deleteByIds${this.$webview2.convertIdsToQueryString(
                  ids
                )}`,
                "post",
                "application/json;charset=UTF-8",
                {},
                false,
                uuid
              );
              await window.chrome.webview.addEventListener(
                "message",
                (e) => {
                  res = e.data;
                  const result = res.response || {};
                  if (result.success && res.webInfo.requestId == uuid) {
                    this.$message.success("删除成功");
                    this.loadData(true);
                  } else {
                    this.$message.error(result.msg || "删除失败");
                  }
                },
                {
                  once: true,
                }
              );
            } else {
              res = await this.$store.dispatch("helpInfo/helpInfoBatchDelete", {
                ids: ids,
              });
              const result = res.data || {};
              if (result.success) {
                this.$message.success("删除成功");
                await this.loadData(true);
              } else {
                this.$message.error(result.msg || "删除失败");
              }
            }
          } catch (e) {
            console.error(e);
          }
          this.helpLoading = false;
        })
        .catch(() => {});
    },
    async loadHelpData(flag, refresh = false) {
      if (flag) {
        this.helpCurrentPage = 1;
      }
      if (refresh) {
        this.helpListQuery = {};
      }
      const params = {
        ...this.helpListQuery,
        page: this.helpCurrentPage,
        pageSize: this.helpPageSize,
      };
      this.helpLoading = true;

      let res = {};
      let _self = this;
      try {
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl: "/helpInfo/pageList",
                RequestMethod: "get",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: qs.stringify(params, { indices: false }),
                isStringParam: true,
                requestId: uuid,
              };
              await send();
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
            }
          );
          /* eslint-disable-next-line */
          async function send() {
            sendObject.sendMessage.connect(function (data) {
              if (!data) {
                console.error("No data received.");
              }
              res = JSON.parse(data);
              const result = res.response || {};
              // update the followings
              if (result.success && res.webInfo.requestId == uuid) {
                const data = result.data;
                _self.helpTableData = data?.list ? data?.list : [];
                _self.helpTotal = data.rowCount || 0;
              } else {
                _self.helpTableData = [];
                _self.total = 0;
              }
            });
          }
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            "/helpInfo/pageList",
            "get",
            "application/json;charset=UTF-8",
            qs.stringify(params, { indices: false }),
            true,
            uuid
          );
          await window.chrome.webview.addEventListener(
            "message",
            (e) => {
              res = e.data;
              const result = res.response || {};
              // TODO： 定制后台数据处理
              if (result.success) {
                const data = result.data;
                this.helpTableData = data?.list ? data?.list : [];
                this.helpTotal = data.rowCount || 0;
              } else {
                this.helpTableData = [];
                this.total = 0;
              }
            },
            {
              once: true,
            }
          );
        } else {
          res = await this.$store.dispatch(
            "helpInfo/helpInfoList",
            qs.stringify(params, { indices: false })
          );
          const result = res.data || {};
          // TODO： 定制后台数据处理
          if (result.success) {
            const data = result.data;
            this.helpTableData = data?.list ? data.list : [];
            this.helpTotal = data.rowCount || 0;
          } else {
            this.helpTableData = [];
            this.total = 0;
          }
        }
      } catch (e) {
        console.error(e);
      }
      this.helpLoading = false;
    },
    // addParam() {
    //   this.helpInfoParamRowData = {};
    //   this.helpInfoParamFlag = true;
    // },
    // async deleteParam() {
    //   this.$mineConfirm("确认要删除", "删除提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(async () => {
    //       const ids = this.paramMultipleSelection.map((item) => item.id);
    //       this.paramLoading = true;
    //       try {
    //         let res = {};
    //         let _self = this;
    //         if (this.$webview2.isWPF) {
    //           const uuid = this.$webview2.generateRandomUUID();
    //           await this.$webview2.sendWebView2(
    //             `/helpParam/deleteByIds${this.$webview2.convertIdsToQueryString(
    //               ids
    //             )}`,
    //             "post",
    //             "application/json;charset=UTF-8",
    //             {},
    //             false,
    //             uuid
    //           );
    //           await window.chrome.webview.addEventListener(
    //             "message",
    //             (e) => {
    //               res = e.data;
    //               const result = res.response || {};
    //               if (result.success && res.webInfo.requestId == uuid) {
    //                 this.$message.success("删除成功");
    //                 // await this.loadData(true);
    //                 this.loadParamData(
    //                   true,
    //                   false,
    //                   this.$store.state.helpAdmin.currentDirId
    //                 );
    //               } else {
    //                 this.$message.error(result.msg || "删除失败");
    //               }
    //             },
    //             {
    //               once: true,
    //             }
    //           );
    //         } else {
    //           res = await this.$store.dispatch(
    //             "helpInfo/helpInfoParamBatchDelete",
    //             {
    //               ids: ids,
    //             }
    //           );
    //           const result = res.data || {};
    //           if (result.success) {
    //             this.$message.success("删除成功");
    //             // await this.loadData(true);
    //             await this.loadParamData(true);
    //           } else {
    //             this.$message.error(result.msg || "删除失败");
    //           }
    //         }
    //       } catch (e) {
    //         console.error(e);
    //       }
    //       this.paramLoading = false;
    //     })
    //     .catch(() => {});
    // },
    // async loadParamData(flag, refresh = false, paramId = this.paramId) {
    //   if (flag) {
    //     this.paramCurrentPage = 1;
    //   }
    //   if (refresh) {
    //     this.paramListQuery = {};
    //   }
    //   const params = {
    //     ...this.paramListQuery,
    //     helpId: paramId,
    //     page: this.paramCurrentPage,
    //     pageSize: this.paramPageSize,
    //   };
    //   this.paramLoading = true;

    //   try {
    //     let res = {};
    //     let _self = this;
    //     if (this.$webview2.isWPF) {
    //       const uuid = this.$webview2.generateRandomUUID();
    //       await this.$webview2.sendWebView2(
    //         "/helpParam/list",
    //         "get",
    //         "application/json;charset=UTF-8",
    //         qs.stringify(params, { indices: false }),
    //         true,
    //         uuid
    //       );
    //       await window.chrome.webview.addEventListener(
    //         "message",
    //         (e) => {
    //           res = e.data;
    //           const result = res.response || {};
    //           if (result.success && res.webInfo.requestId == uuid) {
    //             const data = result.data;
    //             this.paramTableData = data ? data : [];
    //             this.paramTotal = data.rowCount || 0;
    //           } else {
    //             this.paramTableData = [];
    //             this.paramTotal = 0;
    //           }
    //         },
    //         {
    //           once: true,
    //         }
    //       );
    //     } else {
    //       res = await this.$store.dispatch(
    //         "helpInfo/helpInfoParamList",
    //         qs.stringify(params, { indices: false })
    //       );
    //       const result = res.data || {};
    //       // TODO： 定制后台数据处理
    //       if (result.success) {
    //         const data = result.data;
    //         this.paramTableData = data ? data : [];
    //         this.paramTotal = data.rowCount || 0;
    //       } else {
    //         this.paramTableData = [];
    //         this.paramTotal = 0;
    //       }
    //     }
    //   } catch (e) {
    //     console.error(e);
    //   }
    //   this.paramLoading = false;
    // },
    // 查看详情
    editHelp(val) {
      this.helpInfoRowData = val;
      this.helpInfoFlag = true;
    },
    // editParam(val) {
    //   this.helpInfoParamRowData = val;
    //   this.helpInfoParamFlag = true;
    // },
    // 多选
    handleHelpSelectionChange(selection) {
      this.helpMultipleSelection = selection;
    },
    // handleParamSelectionChange(selection) {
    //   this.paramMultipleSelection = selection;
    // },
    helpNumberChange(val) {
      switch (val.flag) {
        case "pageSize":
          this.helpPageSize = val.pageSize;
          this.loadHelpData(true);
          break;
        case "currentPage":
          this.helpCurrentPage = val.currentPage;
          this.loadHelpData(false);
          break;
        default:
          break;
      }
    },
    // paramNumberChange(val) {
    //   switch (val.flag) {
    //     case "pageSize":
    //       this.paramPageSize = val.pageSize;
    //       this.loadParamData(true);
    //       break;
    //     case "currentPage":
    //       this.paramCurrentPage = val.currentPage;
    //       this.loadParamData(false);
    //       break;
    //     default:
    //       break;
    //   }
    // },
    // table格式化部分
    // paramTypeFormatter(row) {
    //   if (row.paramType === 1) {
    //     return "数值";
    //   } else if (row.paramType === 2) {
    //     return "字符串";
    //   } else {
    //     return "";
    //   }
    // },
    repairTypeFormatter(row) {
      if (row.repairType === 1) {
        return "事后维修";
      } else if (row.repairType === 2) {
        return "定期维修";
      } else if (row.repairType === 3) {
        return "视情维修";
      } else {
        return "";
      }
    },
    repairMethodFormatter(row) {
      if (row.repairMethod === 1) {
        return "维修保养";
      } else if (row.repairMethod === 2) {
        return "更换备件";
      } else if (row.repairMethod === 3) {
        return "原件修复";
      } else {
        return "";
      }
    },
    // table事件
    // helpRowClick(row) {
    //   // console.log(row)
    //   this.loadParamData(true, false, row.id);
    //   //   this.$store.commit("SET_CURRENT_PARAM_ID", row.id);
    //   this.paramId = row.id;
    // },
    // helpParamClick(row) {},
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
/deep/ .el-tooltip__popper {
  max-width: 30% !important;
}
.template-root-div {
  display: flex;
}

.left-table {
  flex: 1;
  height: 100%;
}

.right-table {
  flex: 1;
  height: 100%;
  padding-left: 5%;
}
</style>
